<!--
 * @description: 控制对象
 * @fileName: ControlObj.vue
 * @author: ssr
 * @date: 2023-01-05 15:04:32
 * @version: V1.0.0
! -->
<script setup lang="ts">
import type { DrawingTypeEnum } from "@@/constants/other-keys"
import { useScenarioStore } from "@/pinia/stores/scenario"
import { ControlObjects } from "@@/constants/other-keys"
import { ElMessage } from "element-plus"
import { isEmpty } from "lodash-es"
import { computed } from "vue"

// 获取场景状态
const scenarioStore = useScenarioStore()

// 计算属性：面板是否隐藏
const hidden = computed(() => {
  return !scenarioStore.controlObjShow
})

// 计算属性：当前选中的控制对象
const currentControlObj = computed(() => {
  return scenarioStore.currentControlObj
})

// 选择控制对象
function handleSelect(item: { name: string, value: DrawingTypeEnum, type: string }) {
  if (isEmpty(scenarioStore.currentSide)) {
    ElMessage.error("当前没有阵营，请创建阵营")
    return
  }
  scenarioStore.setCurrentControlObj(item)
}
</script>

<template>
  <div class="EditScenario-right" :class="{ hidden }">
    <ul class="control-items">
      <li
        v-for="item in ControlObjects"
        :key="item.value"
        class="control-item"
        :class="{ active: currentControlObj !== null && currentControlObj.value === item.value }"
        @click="handleSelect(item)"
      >
        <i :class="`iconfont icon-${item.type}`" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.EditScenario-right {
  width: 50px;
  height: calc(100%);
  position: absolute;
  top: 0px;
  right: 0;
  background-color: rgba(2, 2, 2, 0.7);
  transition: width 0.3s ease;
  overflow: hidden;

  &.hidden {
    width: 0;
  }
}

.control-items {
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  list-style: none;
}

.control-items,
.control-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50px;

  span {
    font-size: 12px;
  }
}

.control-item + .control-item {
  padding-top: var(--main-padding);
}

.control-item {
  padding: 5px 0;
  cursor: pointer;
  user-select: none;
  caret-color: rgba(0, 0, 0, 0);
  color: #fff;

  &:first-child {
    padding-top: var(--main-padding);
  }

  &.active {
    color: var(--el-color-primary, #409eff);
  }

  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  i {
    font-size: 20px;
    margin-bottom: 4px;
  }
}
</style>
